<template>
	<view :style="colorStyle">
		<view class='payment-status'>
			
			<view class="top-status">
				<image class="status-img" src="../../../static/images/pay-status-success.png"></image>
				<view class='status'>下单成功</view>
			</view>
			
			<view class="desc">
				订单已提交，审核通过后将及时发货，
			</view>
			<view class="desc">
				审核结果会及时来电通知，请保持手机通话畅通～
			</view>

			<view class="btns">
				<button @click="goIndex" class='returnBnt' formType="submit" hover-class='none'>返回首页</button>
				<button @click="goOrderDetails" class='returnBnt goOrder' formType="submit" hover-class='none'>查看订单</button>
			</view>

		</view>
		
		
		<view class='payment-info'>
			<view class='wrapper'>
				<view class='item acea-row row-between-wrapper'>
					<view>冻结押金</view>
					<view class='itemCom'>¥{{order_pay_info.deposit_price}}</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>总租金</view>
					<view class='itemCom'>¥{{order_pay_info.rent_price}}</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>配送方式</view>
					<view class='itemCom'>{{order_pay_info.delivery_mode_label}}</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>租赁方式</view>
					<view class='itemCom'>{{order_pay_info.bill.lease_way}}</view>
				</view>
			</view>
		</view>

		<authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
	</view>
</template>

<script>
	import lotteryModel from './payLottery.vue'
	import {
		getOrderDetail
	} from '@/api/order.js';
	import {
		openOrderSubscribe
	} from '@/utils/SubscribeMessage.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import colors from "@/mixins/color";
	export default {
		components: {
			lotteryModel
		},
		mixins: [colors],
		data() {
			return {
				loading: false,
				lotteryLoading: false,
				orderLottery: false,
				orderId: '',
				order_pay_info: {
					paid: 1,
					_status: {}
				},
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				status: 0,
				msg: '',
				couponsHidden: true,
				couponList: [],
				options: {}
			};
		},
		computed: mapGetters(['isLogin', 'cartNum']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						//#ifndef MP
						this.getOrderPayInfo();
						//#endif
					}
				},
				deep: true
			}
		},
		onLoad: function(options) {
			this.options = options
			if (!options.order_id) return this.$util.Tips({
				title: '缺少参数无法查看订单支付状态'
			}, {
				tab: 3,
				url: 1
			});
			this.orderId = options.order_id;
			this.status = options.status || 0;
			this.msg = options.msg || '';
		},
		onShow() {
			uni.setStorageSync('form_type_cart', 1);
			if (this.isLogin) {
				this.getOrderPayInfo();
			} else {
				//#ifndef MP
				toLogin();
				//#endif
				//#ifdef MP
				this.isShowAuth = true;
				//#endif
			}
		},
		methods: {
			// 授权关闭
			authColse: function(e) {
			  this.isShowAuth = e
			},
			getOrderLottery(status) {
				this.orderLottery = status
				this.lotteryLoading = true
			},
			openTap() {
				this.$set(this, 'couponsHidden', !this.couponsHidden);
			},
			onLoadFun: function() {
				this.getOrderPayInfo();
				this.isShowAuth = false;
			},
			/**
			 * 
			 * 支付完成查询支付状态
			 * 
			 */
			getOrderPayInfo: function() {
				let that = this;
				uni.showLoading({
					title: '正在加载中'
				});
				getOrderDetail(that.orderId).then(res => {
					uni.hideLoading();
					that.$set(that, 'order_pay_info', res.data);
					uni.setNavigationBarTitle({
						title: '下单成功'
					})
					// if(!uni.getStorageSync('news')){
					// 	let colNum = this.cartNum - res.data.total_num;
					// 	this.$store.commit('indexData/setCartNum', colNum > 99 ? '..' : colNum +'');
					// 	uni.removeStorageSync('news')
					// }
					this.loading = true
				}).catch(err => {
					this.loading = true
					uni.hideLoading();
				});
			},
			getOrderCoupon() {
				let that = this;
				orderCoupon(that.orderId).then(res => {
					that.couponList = res.data;
				})
			},
			/**
			 * 去首页关闭当前所有页面
			 */
			goIndex: function(e) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// 去参团页面；
			goPink: function(id) {
				uni.navigateTo({
					url: '/pages/activity/goods_combination_status/index?id=' + id
				});
			},
			/**
			 * 
			 * 去订单详情页面
			 */
			goOrderDetails: function(e) {
				let that = this;
				
				uni.navigateTo({
					url: '/pages/goods/order_list/index?status='
				})
				
				// // #ifdef MP
				// uni.showLoading({
				// 	title: '正在加载',
				// })
				// openOrderSubscribe().then(res => {
				// 	uni.hideLoading();
				// 	uni.navigateTo({
				// 		url: '/pages/goods/order_details/index?order_id=' + that.orderId
				// 	});
				// }).catch(() => {
				// 	nui.hideLoading();
				// });
				// // #endif
				// // #ifndef MP
				// uni.navigateTo({
				// 	url: '/pages/goods/order_details/index?order_id=' + that.orderId
				// })
				// // #endif
			}

		}
	}
</script>

<style lang="scss">
	.coupons {
		.title {
			margin: 30rpx 0 25rpx 0;

			.line {
				width: 70rpx;
				height: 1px;
				background: #DCDCDC;
			}

			.name {
				font-size: 24rpx;
				color: #999;
				margin: 0 10rpx;
			}
		}

		.list {
			padding: 0 20rpx;

			.item {
				margin-bottom: 20rpx;
				box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);

				.price {
					width: 236rpx;
					height: 160rpx;
					font-size: 26rpx;
					color: #fff;
					font-weight: 800;

					text {
						font-size: 54rpx;
					}
					.fontSize{
						font-size: 40rpx;
					}
				}

				.text {
					width: 385rpx;

					.name {
						font-size: #282828;
						font-size: 30rpx;
					}

					.priceMin {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}

					.time {
						font-size: 24rpx;
						color: #999;
						margin-top: 15rpx;
					}
				}
			}

			.open {
				font-size: 24rpx;
				color: #999;
				margin-top: 30rpx;

				.iconfont {
					font-size: 25rpx;
					margin: 5rpx 0 0 10rpx;
				}
			}
		}
	}
	
	.payment-info {
		background-color: #fff;
		margin: 30rpx 30rpx 0 30rpx;
		border-radius: 10rpx;
		border-radius: 16rpx;
	}
	
	.payment-info .wrapper {
		border: 1rpx solid #eee;
		margin: 0 30rpx 47rpx 30rpx;
		padding: 35rpx 0;
		border-left: 0;
		border-right: 0;
	}
	
	.payment-info .wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}
	
	.payment-info .wrapper .item~.item {
		margin-top: 20rpx;
	}
	
	.payment-info .wrapper .item .itemCom {
		color: #666;
	}

	.payment-status {
		background-color: #5ACCBD;
		height: 388rpx;
	}

	.payment-status .icons {
		font-size: 30rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
		// text-shadow: 0px 4px 0px rgba(255,255,255,0.5);
		// border: 6rpx solid #f5f5f5;
		background-color: #999;
		&.icon-dengdaizhifu{
			background-color: #fff;
		}
	}

	// .payment-status .icons.icon-iconfontguanbi {
	// 	text-shadow: 0px 4px 0px #6c6d6d;
	// }

	// .payment-status .iconfont.fail {
	// 	text-shadow: 0px 4px 0px #7a7a7a;
	// }

	.payment-status .status {
		font-size: 40rpx;
		text-align: center;
		color: #fff;
		margin-left: 20rpx;
		// margin: 25rpx 37rpx 37rpx 0;
	}

	.payment-status .wrapper {
		border: 1rpx solid #eee;
		margin: 0 30rpx 47rpx 30rpx;
		padding: 35rpx 0;
		border-left: 0;
		border-right: 0;
	}

	.payment-status .wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}

	.payment-status .wrapper .item~.item {
		margin-top: 20rpx;
	}

	.payment-status .wrapper .item .itemCom {
		color: #666;
	}
	
	.payment-status .btns {
		width: 500rpx;
		display: flex;
		flex-direction: row;
		margin: 40rpx auto 20rpx auto;
	}

	.payment-status .returnBnt {
		width: 230rpx;
		height: 86rpx;
		border-radius: 50rpx;
		color: #39CCC2;
		font-size: 30rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto 20rpx auto;
		border: 1px solid #fff;
		background-color: transparent;
		color: #fff
	}
	
	.goOrder {
		background-color: #fff !important;
		color: #39CCC2 !important;
	}
	
	.top-status {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-top: 56rpx;
		
		.status-img {
			width: 48rpx;
			height: 48rpx;
		}
	}
	
	.desc {
		color: #fff;  
		text-align: center;
		margin-top: 20rpx;
	}
</style>
